import React from 'react';
import { Router, Route, Link } from 'react-router';

import Header from './js/components/header';
import BtnBar from './js/components/btn-bar';
import BtnBarSwitch from './js/components/btn-bar-switch';
import BtnBarDrop from './js/components/btn-bar-drop';
import CheckBoxGroup from './js/components/checkbox-group';
import Films from './js/components/films';
import FilmStore from './js/filmStore';
import {Actions} from './js/filmStore/actions';
import {_users,_doctors,_reports,_category,_hospitals} from './js/filmStore/data'

function getFilms() {
    return FilmStore.getList()
}
function getFilmCats() {
    return FilmStore.getCats()
}
function allChecked() {
    return FilmStore.allChecked()
}
export default class FilmList extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            films: getFilms(),
            sortByTime: 0,
            category: getFilmCats(),
            allChecked: allChecked()
        };
        this._onChange = this._onChange.bind(this)
    }
    handleSortTime(state){
        console.log(state)
    }
    handleCheck(state){
        console.log(state)
    }
    componentWillMount(){
        this.props.routes[0].test = true;
    }
    componentDidMount(){
        Actions.ctrlNav({show:true,active:0});
        FilmStore.addChangeListener(this._onChange);
    }

    componentWillUnmount(){
        FilmStore.removeChangeListener(this._onChange);
    }
    _onChange(){
        this.setState({
            films:  getFilms(),
            allChecked: allChecked()
        });
    }
    filter(filter,data){
        Actions.updateFilter(filter,data)
    }
    render(){
        return (
            <div>
                <Header title="云影像">
                    {/*<Link to={} className="r1">[ = ]</Link>*/}
                </Header>

                <BtnBar>
                    <BtnBarSwitch stateTxt={["最近的影片","以前的影片"]} btnType="btnSwitch" onSwitch={this.handleSortTime} />
                    <BtnBarDrop stateTxt="请选择" btnType="btnDrop">
                        <CheckBoxGroup hasAllCheck={[true,'全部分类']} allChecked={this.state.allChecked} options={this.state.category} name="cate" sendType="fin" saveData={this.filter} />
                    </BtnBarDrop>
                    <div>筛选</div>
                </BtnBar>
                <Films data={this.state.films} />
            </div>
        )
    }
}